<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>文章分析</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <script src="{{ url_for('static',filename='jquery/jquery-3.5.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='echarts/echarts.min.js') }}"></script>

    <script>
        $(function () {//jquery启动函数
            line()
            bar()
        })

        function line() {
            $.ajax({
                url: "/getArtYearDataForLine",
                method: "get",
                success: function (result) {
                    jsonObj = JSON.parse(result)
                    var list1 = jsonObj["re"]
                    {#var li1=list1[0]#}
                    {#var li2=list1[1]#}
                    {#var li3 = list1[2]#}

                    var line = echarts.init(document.getElementById('line'))
                    // 指定图表的配置项和数据
                    option = {
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: list1,
                                type: 'line',
                                smooth: true
                            }
                        ]
                    };
                    {#option = {#}
                    {#    title: {#}
                    {#        text: '各分类文章随数目随时间变化'#}
                    {#    },#}
                    {#    tooltip: {#}
                    {#        trigger: 'axis'#}
                    {#    },#}
                    {#    legend: {#}
                    {#        data: list1#}
                    {#    },#}
                    {#    grid: {#}
                    {#        left: '3%',#}
                    {#        right: '4%',#}
                    {#        bottom: '3%',#}
                    {#        containLabel: true#}
                    {#    },#}
                    {#    toolbox: {#}
                    {#        feature: {#}
                    {#            saveAsImage: {}#}
                    {#        }#}
                    {#    },#}
                    {#    xAxis: {#}
                    {#        type: 'category',#}
                    {#        boundaryGap: false,#}
                    {#        //data: li1#}
                    {#    },#}
                    {#    yAxis: {#}
                    {#        type: 'value'#}
                    {#    },#}
                    {#    series: list1#}
                    {#}#}
                        {#;#}
                        line.setOption(option);
                    }
                ,
                    error: function (e) {
                        layer.msg("请求服务器失败!")
                    }
                });


        }

            function bar() {
                $.ajax({
                    url: "/getArtDataForBar",
                    method: "get",
                    success: function (result) {
                        jsonObj = JSON.parse(result)
                        var bar = echarts.init(document.getElementById('bar'))
                        // 指定图表的配置项和数据
                        option = {
                            legend: {},
                            tooltip: {},
                            dataset: {
                                dimensions: ['product', '点赞量', '收藏量'],
                                source: jsonObj
                            },
                            xAxis: {type: 'category'},
                            yAxis: {},
                            // Declare several bar series, each will be mapped
                            // to a column of dataset.source by default.
                            series: [
                                {type: 'bar'},
                                {type: 'bar'},
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        bar.setOption(option);
                    },
                    error: function (e) {
                        layer.msg("请求服务器失败!")
                    }
                });
            }
    </script>
</head>
<body>
<div class="layui-elem-quote">
    统计图表
</div>
<div class="">
    <div class="layui-row">
        <div class="layui-col-md10 layui-col-md-offset1">
            <div class="layui-card">
                <div class="layui-card-header layui-bg-green" align="center">小说价格变化情况</div>
                <div class="layui-card-body layui-tab-content" style=" height:300px;">
                    <div id="line" style="width: 100%;height: 300px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md10 layui-col-md-offset1">
            <div class="layui-card">
                <div class="layui-card-header layui-bg-green" align="center">不同类型文章的点赞量和收藏量统计</div>
                <div class="layui-card-body">
                    <div id="bar" style="width: 100%;height: 300px"></div>
                </div>
            </div>
        </div>
    </div>


    <script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
    <script>
        //JavaScript代码区域
        layui.use('element', function () {
            var element = layui.element;

        });
    </script>
</div>
</body>
</html>